<script setup lang="ts">
import Menu from "~/components/Menu.vue";
import Question from "./components/question.vue";
import Download from "./components/download.vue";

import useAppState from "~/hooks/useAppState";

const menus = [
  { title: "常见问题", index: "question" },
  {
    title: "下载中心",
    index: "download",
    children: [
      {
        title: "PC客户端",
        index: "pc",
      },
      {
        title: "APP",
        index: "app",
      },
    ],
  },
];

const active = ref<string>("question");

const appState = useAppState();
appState.value.fillAppHeader = true;

const breakcrumbList = computed(() => {
  const list = [{ title: "服务" }];
  const { value } = active;

  if (value === "question") {
    list.push({ title: "常见问题" });
  } else {
    list.push({ title: "下载中心" });

    if (value === "pc") {
      list.push({ title: "PC客户端" });
    } else {
      list.push({ title: "APP" });
    }
  }

  return list;
});
</script>

<template>
  <div class="flex max-w-1200px mx-auto my-12">
    <div class="flex-none w-174px border-r border-#000/10">
      <h3 class="text-2xl mb-8">服务</h3>
      <Menu :menus="menus" v-model="active" />
    </div>

    <div class="flex-auto pl-6">
      <Breadcrumb :list="breakcrumbList" />

      <div class="mt-9">
        <Question v-if="active === 'question'" />
        <Download v-else :type="active" />
      </div>
    </div>
  </div>
</template>
